<template>
  <el-dialog v-model="visible" title="导出配置" width="500">
    <el-form :model="form" ref="formRef" labelWidth="100px">
      <el-form-item
        label="导出数据"
        prop="exportData"
        :rules="[
          {
            required: true,
            message: '请选择导出数据',
            trigger: 'blur',
          },
        ]"
      >
        <el-radio-group v-model="form.exportData">
          <el-radio :value="0" name="exportData"> 当前页 </el-radio>
          <el-radio :value="1" name="exportData"> 全部页 </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="导出方式"
        prop="exportType"
        :rules="[
          {
            required: true,
            message: '请选择导出方式',
            trigger: 'blur',
          },
        ]"
      >
        <el-radio-group v-model="form.exportType">
          <el-radio :value="0" name="exportType"> EXCEL </el-radio>
          <el-radio :value="1" name="exportType"> PDF </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { ElMessage, ElLoading } from "element-plus";
import { downloadFn } from "@/api/index.js";
const props = defineProps({
  queryData: { type: Object, default: () => ({}) },
});

const visible = ref(false);
const formRef = ref();
const form = ref({
  exportType: 0,
  exportData: 0,
});
const emits = defineEmits(["success", "error"]);
const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        text: "正在导出中...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // setTimeout(() => {
      //   loading.close();
      // }, 1500);
      try {
        const res = await downloadFn(
          "/admin-api/system/report/cancelPoints/export",
          {
            ...props.queryData,
            ...form.value,
          },
          { method: "PATCH" }
        );
        if (res) {
          const blob = new Blob([res], {
            type:
              form.value.exportType === 0
                ? "application/vnd.ms-excel;charset=utf-8"
                : "application/pdf;charset=utf-8",
          });
          const url = URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          link.download = "scoreReport" + new Date().getTime();
          link.click();
          window.URL.revokeObjectURL(url);
          ElMessage.success(`导出成功！`);
          onCancel();
          emits("success");
        } else {
          ElMessage.error(`导出失败！`);
          emits("error");
        }
      } catch (error) {}
      loading.close();
    }
  });
};

const onCancel = () => {
  formRef.value.clearValidate();
  visible.value = false;
};
const openDialog = (row) => {
  form.value.exportType = 0;
  form.value.exportData = 0;
  visible.value = true;
  form.value = { ...form.value, ...row };
};

defineExpose({
  openDialog,
});
</script>
